<template>
  <div>
    <!-- 主流程节点 -->
    <div class="node_wrap" v-if="config.type !== 8 && config.type !== 9">
      <!-- ==================================================节点内容================================================== -->
      <div :class="['wrap_content', contentFocus === config.id ? 'wrap_content_active' : '']">
        <el-popconfirm title="确定删除吗？" @confirm="delWrapNode">
          <div v-if="config.type !== 0" slot="reference" class="wrap_content_del">删除节点</div>
        </el-popconfirm>
        <div @click.stop="changeNode(config)">
          <div class="wrap_content_container">
            <img :src="require(`@/assets/img/${config.type}.png`)" />
            <div class="wrap_content_container_title" v-show="showInput !== config.id" @click.stop="changeTitle(config)">{{config.title}}</div>
            <input class="input_1" ref="input" type="text" v-show="showInput === config.id" v-model="config.title" @blur="showInput = ''">
          </div>
          <div class="wrap_content_content">
            <span>请设置触发事件</span>
            <span>〉</span>
          </div>
        </div>
      </div>
      <!-- ==================================================节点内容================================================== -->
      <WorkFlowAdd WrapOrBranch="isWrap" @addWrapNode="addWrapNode" @addBranchNode="addBranchNode" />
    </div>
    <!-- 分支节点 -->
    <div class="branch_wrap" v-if="(config.type === 8 || config.type === 9) && config.conditionNodes && config.conditionNodes.length !== 0">
      <div class="branch_wrap_container">
        <div class="add_branch" @click="addCondition">添加条件</div>
        <div class="branch_wrap_col" v-for="(item, index) in config.conditionNodes" :key="index">
          <!-- ==================================================节点内容================================================== -->
          <div :class="['wrap_content', contentFocus === item.id ? 'wrap_content_active' : '']">
            <el-popconfirm title="确定删除吗？" @confirm="delBranchNode(index)">
              <div class="wrap_content_del" slot="reference">删除节点</div>
            </el-popconfirm>
            <div @click.stop="changeNode(item, index)">
              <div class="wrap_content_container">
                <img :src="require(`@/assets/img/${config.type}.png`)" />
                <div class="wrap_content_container_title" v-show="showInput !== item.id" @click.stop="changeTitle(item, index)">{{item.title}}</div>
                <input class="input_1" ref="input" type="text" v-show="showInput === item.id" v-model="item.title" @blur="showInput = ''">
              </div>
              <div class="wrap_content_content">
                <span>请设置触发事件</span>
                <span>〉</span>
              </div>
            </div>
          </div>
          <!-- ==================================================节点内容================================================== -->
          <WorkFlowAdd WrapOrBranch="isBranch" :index="index" @addWrapNode="addWrapNode" @addBranchNode="addBranchNode" />
          <WorkFlowMain v-if="item.childNode && JSON.stringify(item.childNode) !== '{}'" :config.sync="item.childNode" @changeNode="changeNode" :contentFocus="contentFocus" />
          <div class="cover_top_left" v-if="index === 0"></div>
          <div class="cover_top_right" v-if="index === config.conditionNodes.length - 1"></div>
          <div class="cover_bottom_left" v-if="index === 0"></div>
          <div class="cover_bottom_right" v-if="index === config.conditionNodes.length - 1"></div>
        </div>
      </div>
      <WorkFlowAdd WrapOrBranch="isWrap" @addWrapNode="addWrapNode" @addBranchNode="addBranchNode" />
    </div>
    <WorkFlowMain v-if="config.childNode && JSON.stringify(config.childNode) !== '{}'" :config.sync="config.childNode" @changeNode="changeNode" :contentFocus="contentFocus" />
  </div>
</template>

<script>
import WorkFlowAdd from '@/components/WorkFlow/WorkFlowAdd.vue'

import { nanoid } from 'nanoid'

export default {
  name: 'WorkFlowMain',
  components: { WorkFlowAdd },
  props: {
    config: {
      required: true,
      type: Object,
      default: () => { return {} }
    },
    contentFocus: {
      required: true,
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showInput: ''
    }
  },
  methods: {
    // 新增分支
    addCondition () {
      this.config.conditionNodes.push({ id: nanoid(), title: '条件', childNode: {} })
      this.$forceUpdate()
      console.log(this.config)
    },
    // 删除主节点
    delWrapNode () {
      this.$emit('update:config', this.config.childNode)
      this.$forceUpdate()
      console.log(this.config.childNode)
    },
    // 删除分支节点
    delBranchNode (index) {
      if (this.config.conditionNodes.length > 2) {
        this.config.conditionNodes.splice(index, 1)
      } else {
        this.config.conditionNodes = []
      }
      this.$forceUpdate()
      console.log(this.config)
    },
    // 新增主节点
    addWrapNode (data, index, type, title) {
      let temp = {}
      if (data === 'isWrap') { // 在主节点下新增主节点
        if (this.config.childNode) {
          temp = { id: nanoid(), type, title, childNode: this.config.childNode, conditionNodes: [] }
        } else {
          temp = { id: nanoid(), type, title, childNode: {}, conditionNodes: [] }
        }
        this.config.childNode = temp
      } else if (data === 'isBranch') { // 在分支节点下新增主节点
        if (this.config.conditionNodes[index].childNode) {
          temp = { id: nanoid(), type, title, childNode: this.config.conditionNodes[index].childNode, conditionNodes: [] }
        } else {
          temp = { id: nanoid(), type, title, childNode: {}, conditionNodes: [] }
        }
        this.config.conditionNodes[index].childNode = temp
      }
      this.$forceUpdate()
      console.log(this.config)
    },
    // 新增分支节点
    addBranchNode (data, index, type, title) {
      let temp = {}
      if (data === 'isWrap') { // 在主节点下新增分支节点
        if (this.config.childNode) {
          temp = this.config.childNode
          this.config.childNode = {
            id: nanoid(),
            type,
            title,
            conditionNodes: [{ id: nanoid(), type, title: '条件1', childNode: {} }, { id: nanoid(), type, title: '其他情况', childNode: {} }],
            childNode: temp
          }
        } else {
          this.config.childNode = {
            id: nanoid(),
            type,
            title,
            conditionNodes: [{ id: nanoid(), type, title: '条件1', childNode: {} }, { id: nanoid(), type, title: '其他情况', childNode: {} }],
            childNode: {}
          }
        }
      } else if (data === 'isBranch') { // 在分支节点下新增分支节点
        if (this.config.conditionNodes[index].childNode) {
          temp = this.config.conditionNodes[index].childNode
          this.config.conditionNodes[index].childNode = {
            id: nanoid(),
            type,
            title,
            conditionNodes: [{ id: nanoid(), type, title: '条件1', childNode: {} }, { id: nanoid(), type, title: '其他情况', childNode: {} }],
            childNode: temp
          }
        } else {
          this.config.conditionNodes[index].childNode = {
            id: nanoid(),
            type,
            title,
            conditionNodes: [{ id: nanoid(), type, title: '条件1', childNode: {} }, { id: nanoid(), type, title: '其他情况', childNode: {} }],
            childNode: {}
          }
        }
      }
      this.$forceUpdate()
      console.log(this.config)
    },
    // 修改节点标题
    changeTitle (data, index = -1) {
      this.showInput = data.id
      this.$nextTick(() => {
        if (index === -1) {
          this.$refs.input.focus()
        } else {
          this.$refs.input[index].focus()
        }
      })
    },
    // 节点点击事件
    changeNode (data, index = -1) {
      this.$emit('changeNode', data, index)
    }
  }
}
</script>

<style scoped>

/* 单模块 */

.node_wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 分支模块 */

.branch_wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.branch_wrap_container{
  z-index: 1;
  position: relative;
  display: flex;
  border-top: 2px solid #DEDEDE;
  border-bottom: 2px solid #DEDEDE;
}
.branch_wrap_container::before{
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: #FAFAFA;
}
.add_branch{
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0 12px;
  padding-left: 14px;
  font-size: 12px;
  font-weight: bold;
  height: 28px;
  color: #666;
  cursor: pointer;
  border-radius: 14px;
  line-height: 26px;
  border: 2px solid #DEDEDE;
  background-color: #FFF;
  transition: .3s all;
  transform: translate(-50%, -50%);
}
.add_branch:hover{
  color: #0089FF;
  border-color: #0089FF;
}
.branch_wrap_col{
  padding: 40px 20px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.branch_wrap_col::before{
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: #DEDEDE;
}

/* 节点内容 */

.wrap_content{
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 200px;
  margin: 0 auto;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid #FFF;
  box-shadow: 0 0 10px #E3E4E7;
  background-color: #FFF;
}
.wrap_content_active{
  border: 2px solid #FF5219;
}
.wrap_content_del{
  opacity: 0;
  transition: .3s all;
  position: absolute;
  top: -20px;
  right: -2px;
  color: #999;
  font-size: 12px;
  font-weight: bold;
}
.wrap_content:hover .wrap_content_del{
  opacity: 1;
}
.wrap_content_container{
  display: flex;
  align-items: center;
}
.wrap_content_container>img{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
}
.wrap_content_container_title{
  padding: 2px 0;
  flex: 1;
  font-size: 14px;
  line-height: 14px;
  color: #303233;
  font-weight: bold;
  border: 1px solid #FFF;
}
.input_1{
  padding: 2px 0;
  flex: 1;
  width: 0;
  border: 1px solid #999;
  border-radius: 0;
  outline: none;
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  color: #303233;
}
.wrap_content_content{
  padding: 10px 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #A3A3A3;
  font-weight: normal;
  border-radius: 4px;
  display: flex;
  background-color: #F7F7F7;
}
.wrap_content_content>span:first-child{
  flex: 1;
}

/* 遮盖掉部分边框线 */

.cover_top_left{
  position: absolute;
  top: -2px;
  left: -1px;
  width: 50%;
  height: 2px;
  background-color: #FAFAFA;
}
.cover_top_right{
  position: absolute;
  top: -2px;
  right: -1px;
  width: 50%;
  height: 2px;
  background-color: #FAFAFA;
}
.cover_bottom_left{
  position: absolute;
  bottom: -2px;
  left: -1px;
  width: 50%;
  height: 2px;
  background-color: #FAFAFA;
}
.cover_bottom_right{
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 50%;
  height: 2px;
  background-color: #FAFAFA;
}
</style>
